$(() => {
    // 利用ajax获取数据，再用模板引擎渲染页面
    function init() {
        $.ajax({
            url: bigNews.category_list,
            success: function (res) {
                if (res.code === 200) {
                    // console.log(res);
                    const result = template('aricleTemplate', res)
                    $('tbody').html(result)
                }
            }
        });
    }
    init()
    function operate(url, id) {
        let name = $('#itemName').val()
        let slug = $('#itemSlug').val()
        $.ajax({
            type: "post",
            url: url,
            data: { name, slug, id },
            success: function (response) {
                //  code=201代表创建成功，这里我们用正则表达
                let pattern = /^2[\d]{2}$/
                if ((pattern.test(response.code))) {
                    // 清空表格
                    // 运行init函数
                    init();
                    // 模态框会自动隐藏
                    $('#myModal').modal('hide');
                }
            }
        });
    }
    // 点击新增，编辑按钮，增加操作(两个函数有点相同，我们可以封装起来)
    $('#btn_opt').on('click', function () {
        // console.log(1);
        // 获取输入框val值
        // let name = $('#itemName').val()
        // let slug = $('#itemSlug').val()
        // 再进行Ajax请求
        if ($(this).text() === '新增') {
            operate(bigNews.category_add)
            // $.ajax({
            //     type: "post",
            //     url: bigNews.category_add,
            //     data: { name, slug },
            //     success: function (response) {
            //         //  code=201代表创建成功，这里我们用正则表达
            //         let pattern = /^2[\d]{2}$/
            //         if ((pattern.test(response.code))) {
            //             // 清空表格
            //             // 运行init函数
            //             init();
            //             // 模态框会自动隐藏
            //             $('#myModal').modal('hide');
            //         }
            //     }
            // });
        }
        //当点击text值为编辑的时候我们要切换为编辑当前文件，编辑参数，额外加上id值
        else {
            let id = $('#itemId').val()
            operate(bigNews.category_edit, id)
            // $.ajax({
            //     type: "post",
            //     url: bigNews.category_edit,
            //     data: { name, slug, id },
            //     success: function (res) {
            //         if (/^2[\d]{2}$/.test(res.code)) {
            //             init()
            //             // 模态框自动隐藏
            //             $('#myModal').modal('hide');
            //         }
            //     }
            // });
        }
    })
    //点击删除按钮(需要使用事假委托)，删除类别，需要参数id
    $('tbody').on('click', '#btn-del', function () {
        // 获取id
        // 原生方法 
        // console.log(dom.dateset.id);
        // console.log($(this).data('id'));
        $.ajax({
            type: "post",
            url: bigNews.category_delete,
            data: {
                id: $(this).data().id
            },
            success: function (res) {
                // console.log(res);
                if (/^2[\d]{2}$/.test(res.code)) {
                    // 调用初始化函数
                    init()
                }
            }
        });
    })
    // 点击编辑按钮我要ajex请求到数据渲染到输入框上，并把输入框的标题还有按钮改成编辑
    $('tbody').on('click', '#btn-edit', function () {
        $('#myModal').modal('show')
        $('#myModalLabel').text('编辑分类');
        $('#btn_opt').text('编辑')
        // ajax请求
        const id = $(this).data('id')
        $.ajax({
            type: "get",
            url: bigNews.category_search,
            data: { id },
            success: function (res) {
                // 把数据纯到输入框的val值上，方便调用
                $('#itemName').val(res.data[0].name);
                $('#itemSlug').val(res.data[0].slug);
                $('#itemId').val(res.data[0].id)
            }
        });
    })
    // 我需要模态框隐藏后触发事件，把form表单清空，恢复标题，恢复按钮
    $('#myModal').on('hidden.bs.modal', function () {
        $('#myFrom')[0].reset()
        $('#myModalLabel').text('新加分类');
        $('#btn_opt').text('新增')
    })
})